<script setup lang="ts">
import { computed, ref } from "vue";
import { Dialog, Toast } from "vant";
import { cancelOrderAPI, deleteOrderAPI } from "@/api/consultApi/consultApi.ts";
import { ConsultOrderItem, OrderType } from "@/types/consultTypes/consultTypes.ts";
import { useLookPre } from "@/hooks/useLookPre.ts";
import useConsultStore from "@/pinia/modules/consultStore/consultStore.ts";
import PaySheet from "@/components/lib/PaySheet.vue";

const props = defineProps<{ item: ConsultOrderItem }>();
const emits = defineEmits<{
   (eventName: "deleteSuccess", id: string): void
}>();
const showPopover = ref(false);

const actions = computed(() => [
   { text: "查看处方", disabled: !props.item.prescriptionId },
   { text: "删除订单" },
]);

const consultStore = useConsultStore();

const loading = ref<boolean>(false);

const showSheet = ref(false);

const cancelOrder = async (item: ConsultOrderItem) => {
   loading.value = true;
   Dialog.confirm({ title: "温馨提示", message: "确认取消问诊吗?" }).then(async () => {
      try {
         await cancelOrderAPI(item.id);
         item.status = OrderType.ConsultCancel;
         item.statusValue = "已取消";
      } catch (error: any) {
         Toast.fail(error.message);
      } finally {
         loading.value = false;
      }
   }).catch(() => {
      loading.value = false;
   });
};

const deleteOrder = async (id: string) => {
   try {
      await deleteOrderAPI(id);
      Toast.success({ message: "删除订单成功" });
      emits("deleteSuccess", id);
   } catch (error: any) {
      Toast.fail(error.message);
   }
};

const onSelect = async (options: any) => {
   if (options.text === "删除订单") {
      await deleteOrder(props.item.id);
   } else {
      await useLookPre(props.item.prescriptionId as string);
   }
};

</script>

<template>
   <div class="consult-item">
      <div class="head van-hairline--bottom">
         <img class="img" src="@/assets/avatar-doctor.svg" />
         <p>{{ item.docInfo?.name || "暂未分配医生" }}</p>
         <span :class="{ orange: item.status === OrderType.ConsultPay,green: item.status === OrderType.ConsultChat}"
         >{{ item.statusValue }}</span
         >
      </div>
      <div class="body" @click="$router.push(`/user/consult/${item.id}`)">
         <div class="body-row">
            <div class="body-label">患者</div>
            <div class="body-value">{{ item.patientInfo.name }}</div>
         </div>
         <div class="body-row">
            <div class="body-label">病情描述</div>
            <div class="body-value">{{ item.illnessDesc }}</div>
         </div>
         <div class="body-row">
            <div class="body-label">价格</div>
            <div class="body-value">¥ {{ item.payment.toFixed(2) }}</div>
         </div>
         <div class="body-row">
            <div class="body-label">创建时间</div>
            <div class="body-value tip">{{ item.createTime }}</div>
         </div>
      </div>

      <div class="foot" v-if="item.status === OrderType.ConsultPay">
         <van-button class="gray" plain size="small" round :loading="loading" @click="cancelOrder(item)">取消问诊</van-button>
         <van-button type="primary" size="small" round @click="showSheet=true">去支付</van-button>
      </div>
      <div class="foot" v-if="item.status === OrderType.ConsultWait">
         <van-button class="gray" plain size="small" round :loading="loading" @click="cancelOrder(item)">取消问诊</van-button>
         <van-button type="primary" size="small" round :to="`/consult/chitchat?orderId=${item.id}`">继续沟通</van-button>
      </div>
      <div class="foot" v-if="item.status === OrderType.ConsultChat">
         <van-button v-if="item.prescriptionId" class="gray" plain size="small" round>查看处方</van-button>
         <van-button type="primary" size="small" round :to="`/consult/chitchat?orderId=${item.id}`">继续沟通</van-button>
      </div>
      <div class="foot" v-if="item.status === OrderType.ConsultComplete">
         <div class="more">
            <van-popover placement="top-start" v-model:show="showPopover" :actions="actions" @select="onSelect">
               <template #reference> 更多</template>
            </van-popover>
         </div>
         <van-button class="gray" plain size="small" round :to="`/consult/chitchat?orderId=${item.id}`">问诊记录</van-button>
         <van-button v-if="!item.evaluateId" type="primary" size="small" round>查看评价</van-button>
         <van-button v-else class="gray" size="small" round> 查看评价</van-button>
      </div>
      <div class="foot" v-if="item.status === OrderType.ConsultCancel">
         <van-button class="gray" size="small" round @click="deleteOrder(item.id)">删除订单</van-button>
         <van-button type="primary" size="small" round to="/">咨询其他</van-button>
      </div>

      <pay-sheet v-model:show="showSheet" :orderId="item.id" :payment="item.payment" ></pay-sheet>

   </div>
</template>
<style lang="scss" scoped>
.consult-item {
   border-radius: 4px;
   box-shadow: 0px 0px 22px 0px rgba(245, 245, 245, 0.1);
   background-color: #fff;
   margin-bottom: 10px;

   .head {
      display: flex;
      align-items: center;
      height: 50px;
      padding: 0 15px;

      .img {
         width: 20px;
         height: 20px;
      }

      > p {
         flex: 1;
         font-size: 15px;
         padding-left: 10px;
      }

      > span {
         color: var(--cp-tag);

         &.orange {
            color: #f2994a;
         }

         &.green {
            color: var(--cp-primary);
         }
      }
   }

   .body {
      padding: 15px 15px 8px 15px;

      .body-row {
         display: flex;
         margin-bottom: 7px;
      }

      .body-label {
         width: 62px;
         font-size: 13px;
         color: var(--cp-tip);
      }

      .body-value {
         width: 250px;

         &.tip {
            color: var(--cp-tip);
         }
      }
   }

   .foot {
      padding: 0 15px 15px 15px;
      display: flex;
      justify-content: flex-end;
      align-items: center;

      .van-button {
         margin-left: 10px;
         padding: 0 16px;

         &.gray {
            color: var(--cp-text3);
            background-color: var(--cp-bg);
         }
      }

      .more {
         color: var(--cp-tag);
         flex: 1;
         font-size: 13px;
      }
   }
}
</style>
